let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
    statusEchart: function (data) {
        // 数据进度值
        var dataArr = data;
        if (data == undefined) {
            dataArr = 0;
        }
        let option = {
            title: {
                show: false,
                text: 'wenzi',
                x: '47%',
                y: '57%',
                z: 8,
                textAlign: 'center',
                textStyle: {
                    color: '#FF9933',
                    fontSize: 10,
                    fontWeight: 'normal'
                },

            },
            series: [{
                name: "内部（环形）进度条",
                type: "gauge",
                // center: ['20%', '50%'],
                radius: '56%',
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, '#FF9933'],
                            [1, "#000"]
                        ],
                        width: 6
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
            {
                name: '外部刻度',
                type: 'gauge',
                //  center: ['20%', '50%'],
                radius: '88%',
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    // 仪表盘刻度线
                    lineStyle: {
                        width: 0.5,
                        color: [
                            [1, '#000']
                        ]
                    }
                },
                //仪表盘文字
                axisLabel: {
                    show: true,
                    color: '#FF9933',
                    fontSize: 10,
                    distance: 15,
                    formatter: function (v) {
                        switch (v + '') {
                            case '0':
                                return '0';
                            case '10':
                                return '10';
                            case '20':
                                return '20';
                            case '30':
                                return '30';
                            case '40':
                                return '40';
                            case '50':
                                return '50';
                            case '60':
                                return '60';
                            case '70':
                                return '70';
                            case '80':
                                return '80';
                            case '90':
                                return '90';
                            case '100':
                                return '100';
                        }
                    }
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                        color: '#000', //用颜色渐变函数不起作用
                        width: 0.5,
                    },
                    length: -8
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -14,
                    lineStyle: {
                        color: '#000', //用颜色渐变函数不起作用
                        width: 0.5,
                    }
                }, //分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
            /*内部*/
            {
                type: 'pie',
                radius: ['0', '30%'],
                center: ['50%', '50%'],
                z: 8,
                hoverAnimation: false,
                data: [{
                    name: '检查进度',
                    value: dataArr,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#555555'
                            }, {
                                offset: 1,
                                color: '#000'
                            }])
                        }

                    },
                    label: {
                        normal: {
                            formatter: function (params) {
                                // return params.value + '%';
                                if (params.value >= 60) {
                                    return "异常"
                                } else {
                                    return "正常"
                                }
                            },
                            color: '#FF9933',
                            fontSize: 14,
                            fontWeight: "bold",
                            position: 'center',
                            show: true
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }],
            },
            /*外一层*/
            {
                type: "pie",
                radius: "38%",
                startAngle: 220,
                endAngle: -40,
                hoverAnimation: false,
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: '##FFCC99'
                        }
                    }
                }],
            },
            //外二层圈
            {
                type: "pie",
                radius: "44%",
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                z: 0,
                hoverAnimation: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [{
                    "value": 1,
                    itemStyle: {
                        normal: {
                            color: '#FFCC99'
                        }
                    }
                }]
            }
            ]
        };
        var chartDom = document.getElementById('device-status')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-status"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    statusEcharts: function (data) {
        let option = {
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    detail: {
                        formatter: '正常',
                        color: '#2e95f7',
                        fontSize: '16px',
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 6,
                            color: [[0.45, '#2e95f7'], [0.6, '#5abf39'], [1, '#f6aa3f']],
                        },
                        show: true,
                    },
                    axisTick: {
                        show: false,
                        splitNumber: 4
                    },
                    axisLabel: {
                        show: true,
                        distance: 15,
                        fontSize: '8px',
                        color: 'auto',
                    },
                    splitLine: {
                        show: true,
                        length: -6,
                        lineStyle: {
                            width: 1,
                            color: 'auto',
                        }
                    },
                    pointer: {
                        show: true,
                        length: '50%',
                        width: '2',
                    },
                    itemStyle: {
                        color: '#17324d'
                    },
                    center: ["50%", "55%"],
                    radius: '100%',
                    startAngle: 185,
                    endAngle: -5,
                    min: 0,
                    max: 40,
                    animation: true,
                    data: [{ value: 10 }]
                },
                {
                    name: '小圆形',
                    type: 'pie',
                    hoverAnimation: false,
                    legendHoverLink: false,
                    tooltip: {
                        show: false
                    },
                    center: ['50%', '55%'],
                    radius: ['3%'],
                    z: 20,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    animation: false,
                    data: [{
                        value: 0,
                        name: '1',
                        itemStyle: {
                            normal: {
                                color: "red"
                            }
                        }
                    }, {
                        value: 100,
                        name: '2',
                        itemStyle: {
                            normal: {
                                color: '#17324d'
                            }
                        }
                    }]

                },
            ]
        };
        var chartDom = document.getElementById('device-status')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-status"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    powerEchart: function (data) {
        var value = 60;
        var colorSet = {
            color: '#0063E7'
        };

        let option = {
            title: {
                show: false,
                text: '仪表盘'
            },
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: "最外部进度条",
                type: "gauge",
                radius: '92%',
                startAngle: 210,
                endAngle: -30,
                min: 0,
                max: 100,
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [value / 100, new echarts.graphic.LinearGradient(
                                0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#fe827b',
                                },
                                {
                                    offset: 1,
                                    color: '#ffc272',
                                }
                            ]
                            )],
                            [
                                1, '#ddd'
                            ]
                        ],
                        width: 3
                    },
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    show: false
                },
                title: { //标题
                    show: false,
                },
                data: [{
                    name: "title",
                    value: value,
                }],
                pointer: {
                    show: false,
                },
                animationDuration: 4000,
            },
            {
                name: '排名',
                type: 'gauge',
                radius: '84%',
                startAngle: -30,
                endAngle: 210,
                clockwise: false,
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#fe827b',
                                    }, {
                                        offset: 1,
                                        color: '#ffc272',
                                    }]
                                )
                            ],
                        ]
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    distance: -60,
                    color: '#000',
                    formatter: function (v) {
                        // switch (v + '') {
                        //     case '100':
                        //         return '高';
                        //     case '50':
                        //         return '中';
                        //     case '0':
                        //         return '低';
                        // }
                    }
                },
                title: { //标题
                    show: true,
                    offsetCenter: [0, 75], // x, y，单位px
                    textStyle: {
                        color: "#999",
                        fontSize: 10, //表盘上的标题文字大小
                        fontWeight: 200,
                        fontFamily: 'PingFangSC'
                    }
                },
                detail: {
                    show: true,
                    offsetCenter: [0, 0],
                    textStyle: {
                        fontSize: 16,
                    },
                    formatter: function (value) {
                        return value + 'KW' + '\n当前功率'
                    }
                },
                pointer: {
                    show: false
                },
                data: [{
                    // name: '评估时间：2020.12.23',
                    value: value
                }]
            },
            {
                type: 'gauge',
                radius: '82%',
                min: 100,
                max: 0,
                startAngle: -22.5,
                endAngle: 202.5,
                clockwise: false,
                splitNumber: 5,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [
                            [1, 'rgba(0,0,0,0)']
                        ]
                    }
                }, //仪表盘轴线
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    },
                    length: -8
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -16,
                    lineStyle: {
                        color: '#fff'
                    }
                }, //分隔线样式
                axisLabel: {
                    show: true,
                    distance: 15,
                    textStyle: {
                        color: '#000',
                        fontSize: '10'
                    },
                    formatter: '{value}'
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                }
            },
            ]
        };
        var chartDom = document.getElementById('device-power')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-power"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    voltageEchart: function (data) {
        let option = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 210,
                    endAngle: -30,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 12
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 12
                        }
                    },
                    axisTick: {
                        distance: -20,
                        length: 2,
                        splitNumber: 5,
                        lineStyle: {
                            width: 0.5,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -24,
                        length: 6,
                        lineStyle: {
                            width: 1,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -10,
                        color: '#999',
                        fontSize: 8,
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 16,
                        fontWeight: 'bolder',
                        formatter: '{value} °C',
                        color: 'auto'
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 210,
                    endAngle: -30,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#FD7347'
                    },
                    progress: {
                        show: true,
                        width: 3
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                }
            ]
        };
        setInterval(function () {
            const random = +(Math.random() * 60).toFixed(2);
            myChart.setOption({
                series: [
                    {
                        data: [
                            {
                                value: random
                            }
                        ]
                    },
                    {
                        data: [
                            {
                                value: random
                            }
                        ]
                    }
                ]
            });
        }, 2000);
        var chartDom = document.getElementById('device-voltage')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-voltage"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    tensionEchart: function (data) {
        const gaugeData = [
            {
                value: 20,
                name: 'Good',
                title: {
                    offsetCenter: ['-40%', '80%']
                },
                detail: {
                    offsetCenter: ['-40%', '95%']
                }
            },
            {
                value: 40,
                name: 'Better',
                title: {
                    offsetCenter: ['0%', '80%']
                },
                detail: {
                    offsetCenter: ['0%', '95%']
                }
            },
            {
                value: 60,
                name: 'Perfect',
                title: {
                    offsetCenter: ['40%', '80%']
                },
                detail: {
                    offsetCenter: ['40%', '95%']
                }
            }
        ];
        let option = {
            series: [
                {
                    type: 'gauge',
                    radius: '92%',
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 12,
                        itemStyle: {
                            color: '#FAC858'
                        }
                    },
                    pointer: {
                        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                        width: 4,
                        length: '80%',
                        offsetCenter: [0, '8%']
                    },
                    progress: {
                        show: true,
                        overlap: true,
                        roundCap: true,
                        width: 6,
                    },
                    axisLine: {
                        roundCap: true,
                        lineStyle: {
                            width: 6,
                        }
                    },
                    axisLabel: {
                        distance: 8,
                        textStyle: {
                            fontSize: 10,
                        },
                    },

                    data: gaugeData,
                    title: {
                        show: false,
                        fontSize: 10
                    },
                    detail: {
                        width: 10,
                        height: 14,
                        fontSize: 8,
                        color: '#fff',
                        backgroundColor: 'inherit',
                        borderRadius: 3,
                        formatter: '{value}'
                    }
                }
            ]
        };
        setInterval(function () {
            gaugeData[0].value = +(Math.random() * 100).toFixed(2);
            gaugeData[1].value = +(Math.random() * 100).toFixed(2);
            gaugeData[2].value = +(Math.random() * 100).toFixed(2);
            myChart.setOption({
                series: [
                    {
                        data: gaugeData
                    }
                ]
            });
        }, 2000);
        var chartDom = document.getElementById('device-tension')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-tension"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    currentEchart: function (data) {
        let option = {
            series: [{
                type: 'gauge',
                radius: '92%',
                min: 0,
                max: 300,
                progress: {
                    show: true,
                    width: 10
                },
                axisLine: {
                    lineStyle: {
                        width: 10
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 10,
                    distance: -0,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 10,
                    color: '#999',
                    fontSize: 10
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 14,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 18,
                    offsetCenter: [0, '70%']
                },
                data: [{
                    value: 200
                }]
            }]
        };

        var chartDom = document.getElementById('device-current')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-current"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    currentEcharts: function (data) {
        let option = {
            series: [{
                type: 'gauge',
                radius: '92%',
                startAngle: 220,
                endAngle: -40,
                min: 0,
                max: 100,
                splitNumber: 10,
                axisLabel: {
                    distance: 12,
                    fontSize: '8px',
                    color: 'rgba(146, 179, 207, 1)',
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: [[0.6, 'rgba(129, 201, 38, 0.5)'], [0.8, 'rgba(129, 201, 38, 0.7)'], [1, 'rgba(129, 201, 38, 1)']]
                    }
                },
                splitLine: {
                    length: -8,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(146, 179, 207, 0.5)',
                    },
                },
                axisTick: {
                    show: false
                },
                pointer: { // 分隔线
                    shadowColor: 'auto',
                    //默认透明
                    shadowBlur: 10,
                    length: '50%',
                    width: 1
                },
                itemStyle: {
                    color: 'rgba(129, 201, 38, 1)',
                    borderColor: 'rgba(129, 201, 38, 1)',
                    borderWidth: 1
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 10,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: 'rgba(129, 201, 38, 1)'
                    }
                },
                detail: {
                    formatter: '{value}',
                },
                data: [{
                    value: 50,
                    title: {
                        color: '#c0e492',
                        // 标题颜色
                    },
                    detail: {
                        color: '#c0e492',
                        fontSize: '22px',
                        // 数据详情颜色
                        offsetCenter: ['0%', '70%'],
                    },
                },
                ],
            },
            ],
        };
        var chartDom = document.getElementById('device-current')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-current"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    lineoneEchart: function (data) {
        let XData = ['01:00', '04:00', '08:00', '12:00', '16:00', '20:00']
        let valueData = {
            data1: { name: 'UA', val: [64, 159, 112, 86, 151, 131, 118] },
            data2: { name: 'UB', val: [124, 30, 77, 97, 67, 75, 70] }
        }
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: ["#F58080", "#47D8BE", "#F9A589"],
                right: '2%',
                top: '2%'
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: XData,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(193, 207, 220, 1)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 1)"
                    }
                },
            },
            yAxis: [{
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 1)"
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#cdd5e2'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(193, 207, 220, 1)',
                    }
                },
            }
            ],
            series: [{
                name: valueData.data1.name,
                type: 'line',
                data: valueData.data1.val,
                color: "#358aff",
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 0, //标记的大小
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#358aff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#358aff',
                    }
                },
                emphasis: {
                    // 鼠标hover上去的时候，拐点的颜色和样式
                    itemStyle: {
                        color: '#358aff', //颜色
                        borderColor: '#fff', //图形的描边颜色
                        borderWidth: 2, // 描边的线宽
                        shadowBlur: 4, // 图形的阴影大小
                        shadowColor: '#358aff', // 图形的阴影颜色
                    },
                },
                smooth: false
            },
            {
                name: valueData.data2.name,
                type: 'line',
                data: valueData.data2.val,
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 0, //标记的大小
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#f2993d',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f2993d',
                    }
                },
                emphasis: {
                    // 鼠标hover上去的时候，拐点的颜色和样式
                    itemStyle: {
                        color: '#f2993d', //颜色
                        borderColor: '#fff', //图形的描边颜色
                        borderWidth: 2, // 描边的线宽
                        shadowBlur: 4, // 图形的阴影大小
                        shadowColor: '#f2993d', // 图形的阴影颜色
                    },
                },
                smooth: false
            }
            ]
        };
        var chartDom = document.getElementById('line-one')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("line-one"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    linesecondEchart: function (data) {
        let valueData = {
            data1: { name: 'lebdge', val: [8000, 8900, 11500, 13000, 12000, 11800, 13500, 9000, 9800, 15000, 13000, 6688] },
            data2: { name: 'Legend', val: [7000, 11800, 9000, 9800, 15000, 13000, 12000, 13500, 13000, 11500, 11500, 8900] }
        }
        let option = {
            tooltip: {
                show: true,
                trigger: 'axis',
                borderRadius: 8, //边框圆角
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        type: 'solid',
                        color: '#42bdf3',
                    },
                },
            },
            legend: {
                show: true,
                right: '0',
                top: '12%',
                itemWidth: 6,
                textStyle: {
                    color: '#556677',
                },
            },
            grid: {
                top: '10%',
                left: '0',
                right: '4%',
                bottom: '6%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG', 'HH'],
                // 去除刻度线
                axisTick: {
                    show: false,
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: '#aaa1a1',
                    formatter: function (params) {
                        var newParamsName = '';
                        var paramsNameNumber = params.length;
                        var provideNumber = 3; //一行显示几个字
                        // if(xAxis.data.length<5){
                        //   var provideNumber = 5; //一行显示几个字
                        // }else{
                        //   provideNumber = 3;
                        // }
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = '';
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = '\xa0' + params.substring(start, end) + '\n';
                                }
                                newParamsName += tempStr;
                            }
                        } else {
                            newParamsName = params;
                        }
                        return newParamsName;
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#d1d1d1', // 颜色
                    },
                },
            },
            yAxis: {
                type: 'value',
                name: '单位 (个)',
                nameTextStyle: {
                    color: '#aaa1a1',
                    padding: [0, 0, 0, -45],
                },
                nameGap: 30,
                // 去除刻度线
                axisTick: {
                    show: false,
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: '#aaa1a1',
                },
                // 去除x轴的颜色
                axisLine: {
                    show: false,
                },
                // 修改y轴分割线
                splitLine: {
                    lineStyle: {
                        color: '#e6e6e6',
                        type: 'dashed',
                    },
                },
            },
            series: [
                {
                    name: valueData.data1.name,
                    symbol: 'none', //变为实心圆
                    type: 'line',
                    // stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        color: '#48B3FF',
                        width: 5,
                    },
                    itemStyle: {
                        normal: {
                            color: '#ffc62d',
                        }
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(195,230,255,1)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(195,230,255,0.1)',
                                },
                            ],
                            false
                        ),
                    },
                    data: valueData.data1.val,
                },
                {
                    name: valueData.data2.name,
                    symbol: 'none', //变为实心圆
                    type: 'line',
                    // stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        color: '#f7b429',
                        width: 5,
                    },
                    itemStyle: {
                        normal: {
                            color: '#53c5ff',
                        }
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(254, 238, 150,0.8)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 245, 300,0.3)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                    data: valueData.data2.val,
                },
            ],
        };

        var chartDom = document.getElementById('line-second')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("line-second"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    linethirdEchart: function (data) {
        let XData = ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG', 'HH']
        let valueData = {
            data1: { name: 'Legend', val: [64, 159, 112, 86, 151, 131, 118, 78] }
        }
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: ["#F58080", "#47D8BE", "#F9A589"],
                right: '2%',
                top: '2%'
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: XData,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(193, 207, 220, 1)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 1)"
                    }
                },
            },
            yAxis: [{
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: "rgba(0, 0, 0, 1)"
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#cdd5e2'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(193, 207, 220, 1)',
                    }
                },
            }
            ],
            series: [{
                name: valueData.data1.name,
                type: 'line',
                data: valueData.data1.val,
                color: "#358aff",
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 0, //标记的大小
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#358aff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#358aff',
                    }
                },
                emphasis: {
                    // 鼠标hover上去的时候，拐点的颜色和样式
                    itemStyle: {
                        color: '#358aff', //颜色
                        borderColor: '#fff', //图形的描边颜色
                        borderWidth: 2, // 描边的线宽
                        shadowBlur: 4, // 图形的阴影大小
                        shadowColor: '#358aff', // 图形的阴影颜色
                    },
                },
                smooth: false
            }
            ]
        };
        var chartDom = document.getElementById('line-third')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("line-third"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    columnarLeftEchart: function (data) {
        let valueData = {
            data1: [220, 182, 191, 234, 290, 330, 310],
            data2: [191, 234, 220, 182, 182, 191, 234]
        }
        let option = {
            xAxis: {
                data: ['01:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
            },
            yAxis: {
                //show: false
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            series: [
                {
                    name: 'a',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: 16, //柱子宽度
                    barGap: 0.5, //柱子之间间距
                    emphasis: {
                        itemStyle: {//填充部分鼠标移上去颜色
                            color: 'rgba(255, 0, 0, 0.4)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255, 0, 0, 0.4)',
                            borderWidth: '1',
                            borderColor: 'rgba(255, 0, 0 , 0.3)',
                        }
                    },
                    data: valueData.data1,
                    legendHoverLink: false,
                },
                {
                    name: 'b',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: 16, //柱子宽度
                    barGap: 0.5, //柱子之间间距
                    emphasis: {
                        itemStyle: {//填充部分鼠标移上去颜色
                            color: 'rgba(143, 219, 255, 0.45)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(143, 219, 255, 0.45)',
                            borderWidth: '1',
                            borderColor: 'rgba(143, 219, 255 ,1)',
                        }
                    },
                    data: valueData.data2,
                    legendHoverLink: false,
                },
            ]
        };
        var chartDom = document.getElementById('chart-one')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-one"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    columnarConEchart: function (data) {
        let valueData = {
            data1: { name: 'lebdge', val: [11, 20, 30, 26, 53, 24, 19] },
            data2: { name: 'Legend', val: [53, 24, 19, 11, 20, 30, 26,] }
        }
        let option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                icon: 'circle',
                left: 'center',
                top: '5',
                show: true,
            },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            xAxis: {

                type: 'category',

                data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],


            },
            yAxis: {
                type: 'value',

            },
            series: [
                {
                    name: valueData.data1.name,
                    type: 'bar',
                    barWidth: 15,
                    stack: '数量',
                    data: valueData.data1.val,
                    itemStyle: {
                        normal: {
                            //颜色渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#317EEA'
                            }, {
                                offset: 1,
                                color: '#4DB9F6'
                            }])
                        }
                    }
                },

                {
                    name: valueData.data2.name,
                    type: 'bar',
                    barWidth: 30,
                    stack: '数量',
                    data: valueData.data2.val,
                    itemStyle: {
                        normal: {
                            //颜色渐变
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FC915A'
                            }, {
                                offset: 1,
                                color: '#FBDD76'
                            }])
                        }
                    }
                },

            ]
        };

        var chartDom = document.getElementById('chart-second')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-second"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    columarRightEchart: function (data) {
        let valueData = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
        let option = {
            title: {
                show: false,
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: false,
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '70%',
                    data: valueData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var chartDom = document.getElementById('chart-third')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-third"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    pieEchart: function (data) {
        let valueData = [
            { value: 20, name: 'A相电压' },
            { value: 30, name: 'B相电压' },
            { value: 25, name: 'C相电压' },
            { value: 25, name: 'D相电压' },
            { value: 20, name: 'E相电压' },
        ]
        let option = {
            color: ['#59A2FE', '#FFB717', '#FC8F6B', '#70E07B', '#FBDA3D', '#11E5F1', '#E3A0FF', '#8294FC', '#6AD6FE'],
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                itemWidth: 18,
                itemHeight: 6,
                right: '10%',
                align: 'left',
                top: 'middle',
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    fontWeight: 400,
                    color: '#0D1134',
                    lineHeight: 17,
                },
            },
            series: [
                {
                    type: 'pie',
                    radius: [0, 90],
                    labelLine: {
                        show: false,
                    },
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        borderWidth: 5,
                        borderColor: '#fff',
                    },
                    data: valueData,
                },
            ],
        };

        var chartDom = document.getElementById('chart-pie')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-pie"), function (element) {
            myChart.resize()
        })
        return myChart
    },
}